<!DOCTYPE html>
<html lang="cmn-hans" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>新增用户</title>
	<link rel="stylesheet" th:href="@{/component/layui/css/layui.css}" media="all">
	<link rel="stylesheet" th:href="@{/dimples/css/dimples.css}"/>
</head>
<!-- 自定义样式 -->
<style>
	body {
		background-color: #fff;
	}

	#user-add {
		background-color: #fff;
		padding: 20px 25px 0 25px;
	}

	#user-add .layui-treeSelect .ztree li a, .ztree li span {
		margin: 0 0 2px 3px !important;
	}

	#user-add .layui-form .dimples-form-submit {
		float: right;
	}

</style>

<body>
<div class="layui-fluid" id="user-add">
	<form class="layui-form" action="" lay-filter="user-add-form">
		<!-- 用户名 -->
		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">用户名：</label>
			<div class="layui-input-block">
				<label>
					<input type="text" name="username" minlength="2" maxlength="10"
								 required lay-verify="range|username|required"
								 autocomplete="off" class="layui-input">
				</label>
			</div>
		</div>
		<!-- 电话号码 -->
		<div class="layui-form-item">
			<label class="layui-form-label">手机：</label>
			<div class="layui-input-block">
				<label>
					<input type="tel" name="mobile" lay-verify="phone" autocomplete="off" class="layui-input">
				</label>
			</div>
		</div>
		<!-- 邮箱 -->
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱：</label>
			<div class="layui-input-block">
				<label>
					<input type="text" name="email" lay-verify="email" maxlength="50" autocomplete="off"
								 class="layui-input">
				</label>
			</div>
		</div>
		<!-- 角色 -->
		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">角色：</label>
			<div class="layui-input-block">
				<div id="user-add-role"></div>
			</div>
		</div>
		<!-- 部门 -->
		<div class="layui-form-item">
			<label class="layui-form-label">部门：</label>
			<div class="layui-input-block">
				<!--<div id="user-add-dept"></div>-->
				<label for="user-add-dept"></label>
				<input type="text" name="deptId" id="user-add-dept" class="layui-input">
			</div>
		</div>
		<!-- 状态 -->
		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">状态：</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="1" title="有效" checked="">
				<input type="radio" name="status" value="0" title="禁用">
			</div>
		</div>
		<!-- 性别 -->
		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">性别：</label>
			<div class="layui-input-block">
				<input type="radio" name="gender" value="0" title="女性">
				<input type="radio" name="gender" value="1" title="男性">
				<input type="radio" name="gender" value="2" title="保密" checked="">
			</div>
		</div>
		<!-- 备注 -->
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">备注：</label>
			<div class="layui-input-block">
				<label>
					<textarea name="description" maxlength="100" class="layui-textarea"></textarea>
				</label>
			</div>
		</div>
		<!-- 提交 -->
		<div class="layui-form-item dimples-form-submit">
			<button class="layui-btn" lay-submit="" lay-filter="user-add-form-submit"
							id="submit">立即提交
			</button>
			<button type="reset" class="layui-btn" id="reset">重置</button>
		</div>
	</form>
</div>
</body>
<script type="application/javascript" th:src="@{/component/layui/layui.js}"></script>
<script type="application/javascript">
    layui.use(['form', 'jquery', 'layer', 'xmSelect', 'treeSelect', 'pearDimples'], function () {
        let $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            xmSelect = layui.xmSelect,
            treeSelect = layui.treeSelect,
            pearDimples = layui.pearDimples;
        let $view = $('#user-add');

        form.render();

        /* 部门下拉框 */
        treeSelect.render({
            elem: $view.find('#user-add-dept'),
            type: 'get',
            data: '/dept/select/tree',
            placeholder: '请选择',
            search: false
        });

        /* 角色下拉框 */
        let userRole = xmSelect.render({
            el: '#user-add-role',
            name: 'roleId',
            layVerify: 'required',
            layVerType: 'tips',
            empty: '呀, 没有数据呢',
            theme: {
                color: '#1cbbb4',
            },
            toolbar: {
                show: true,
                list: ['ALL', 'CLEAR', 'REVERSE']
            },
            data: []
        });
        $.ajax({
            type: 'get',
            url: '/role'
        }).then(response => {
            var res = response.data;
            var tranData = [];
            for (var i = 0; i < res.length; i++) {
                tranData.push({
                    name: res[i].roleName,
                    value: res[i].roleId
                })
            }
            userRole.update({
                data: tranData,
                autoRow: true,
            })
        });
        /* 角色渲染完成 */

        form.on('submit(user-add-form-submit)', function (data) {
            console.log(data.field);
            pearDimples.post('/user', data.field, function () {
                parent.layer.closeAll();
                parent.layer.msg('新增用户成功，初始密码为 123456', {icon: 1});
                $('#dimples-refresh', parent.document).click();
            });
            return false;
        });
    });
</script>
</html>














